console.log('main.js');

getCSS.onclick = ()=>{
    const request = new XMLHttpRequest();
    request.open('GET',"/style.css");
    request.onreadystatechange = ()=>{
        console.log(request.readyState);
        if (request.readyState===4){
            console.log('下载完成');
            //下载完成但不知道是成功 200+ 还是失败400+  500+
            if (request.status>=200 && request.status<300){
                //创建style标签
                const style = document.createElement('style');
                // 填写style内容
                style.innerHTML = request.response;
                //将style插入到head里面
                document.head.append(style);
            }else{
                console.log('加载CSS失败')
            }
            console.log(request.status)
        }
    };
    request.send();
}

getJS.onclick = () => {
    const request = new XMLHttpRequest();
    request.open('GET','/2.js');
    request.onreadystatechange = ()=>{
        // console.log(request.readyState)
        if (request.readyState === 4 && request.status === 200){
                const script = document.createElement('script');
                script.innerHTML = request.response;
                document.body.appendChild(script);
        }
    }
    // request.onload = ()=>{
    //     const script = document.createElement('script');
    //     script.innerHTML = request.response;
    //     document.body.appendChild(script);
    // }
    // request.onerror = ()=>{
    //     console.log('请求js失败');
    // }
    request.send();
}

getHTML.onclick = () => {
    const request = new XMLHttpRequest();
    request.open('get','/3.html');
    request.onreadystatechange = ()=>{
        // console.log(request.readyState)
        if (request.readyState === 4 && request.status === 200){
            const div = document.createElement('div')
            div.innerHTML = request.response;
            document.body.appendChild(div)
        }
    }
    // request.onload = ()=>{
    //     const div = document.createElement('div')
    //     div.innerHTML = request.response;
    //     document.body.appendChild(div)
    // }
    // request.onerror = ()=>{
    //     console.log('请求hmtl失败');
    // }
    request.send();
}

getXML.onclick = ()=>{
    const request = new XMLHttpRequest();
    request.open('get','/4.xml')
    console.log(request.readyState)
    request.onreadystatechange = ()=>{
        // console.log(request.readyState)
        if (request.readyState === 4 && request.status === 200){
            console.log(request.responseXML);
            const dom = request.responseXML;
            // console.log(dom.getElementsByTagName('warning'))
            const text = dom.getElementsByTagName('warning')[0].textContent;
            console.log(text.trim())
        }
    }
    request.send();
}
getJSON.onclick = ()=>{
    const request = new XMLHttpRequest();
    request.open('get','/5.json')
    console.log(request.readyState)
    request.onreadystatechange = ()=>{
        // console.log(request.readyState)
        if (request.readyState === 4 && request.status === 200){
            console.log(request.response);
            const object = JSON.parse(request.response);
            console.log(object)
            myName.innerText = object.name
        }
    }
    request.send();
}
let n = 1;
getPage.onclick = ()=>{
    const request = new XMLHttpRequest();
    request.open('get',`/page${n+1}`)
    request.onreadystatechange = ()=>{
        // console.log(request.readyState)
        if (request.readyState === 4 && request.status === 200){
            const array = JSON.parse(request.response);
            array.forEach(item=>{
                const li = document.createElement('li')
                li.textContent = item.id;
                list.appendChild(li);
            })
            n+=1;
        }
    }
    request.send();
}